<template>
  <div class="container-fluid d-flex flex-column justify-content-center align-items-center" style="height:100vh;">
    <h1 style="color:#4AA4B4;">GDD宠物馆</h1>
    <div class="row" style="width:100%;justify-content:center;">
      <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4"
           style="border:1px solid #dedede;border-radius:0.5em;padding: 2em 2em;">
        <el-form ref="userForm" :model="userForm" :rules="userFormRules" :status-icon="true"
                 label-width="60px" label-position="left" size="medium">
          <el-form-item label="账号" prop="email">
            <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pw">
            <el-input v-model="userForm.pw" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium"
                       @click="submitForm('userForm')"
                       :disabled="formSubmitDisabled"
                       style="margin:2px 0px;">登陆
            </el-button>
            <el-button size="medium"
                       style="margin:2px 0px;"
                       :disabled="formSubmitDisabled">
              <router-link to="/modifyPassword">忘记密码</router-link>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import md5 from 'js-md5';

  export default {
    name: 'Login',
    data() {
      return {
        // 默认开启表单提交
        formSubmitDisabled: false,
        // 表单对象
        userForm: {
          email: '',
          password: '', pw: '',
        },
        // 表单校验规则
        userFormRules: {
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {type: 'email', message: '邮箱格式错误', trigger: ['blur', 'change']}
          ],
          pw: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {pattern: '^[a-zA-Z]\\w{5,9}$', message: '密码以字母开头的6-10位字符，只能包含字母、数字、下划线', trigger: ['blur', 'change']}
          ],
        },
      }
    },
    methods: {
      /**
       * 提交表单
       */
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.formSubmitDisabled = true;
            sessionStorage.setItem('pw', this.userForm.pw);
            this.userForm.password = md5(this.userForm.pw);
            this.userForm.pw = 'abc12345';
            this.$postRequest('/gdd/user/login', this.userForm).then(response => {
              if (response.code === 0) {
                sessionStorage.clear();
                sessionStorage.setItem('jwt', response.data.jwt);
                sessionStorage.setItem('name', response.data.name);
                sessionStorage.setItem('cover', response.data.cover);
                this.$message.success('登陆成功！');
                setTimeout(() => {
                  this.$router.replace('/layout');
                }, 500);
              } else {
                this.formSubmitDisabled = false;
                this.userForm.pw = sessionStorage.getItem('pw');
              }
            })
          } else {
            this.formSubmitDisabled = false;
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  form a {
    color: #999999;
    text-decoration: none;
  }
  form a:hover {
    text-decoration: none;
  }
</style>
